'use client'
import { FC, PropsWithChildren } from "react";
import { useRouter } from "@/i18n";
import { useTranslations } from "next-intl";
import './page.scss'

interface Props { }
const App: FC<PropsWithChildren<Props>> = (props) =>{
    const t = useTranslations("ReferralsPage")
    const router:any = useRouter()
    const goPage = (path = '')=>{
        if(path){
            if(path === 'home'){
                router.replace('/')
                return
            }
            
            console.log(router);
            
            router.replace(`/affiliate/${path}`)
            return 
        }
        router.back()
    }

    return (
        <div className="vux-drawer-referrals">
            <div className="vux-drawer-body" style={{transform: "translate3d(0px, 0px, 0px)"}}>
                <div className="referral router-view" id="id-router-view" style={{backgroundColor: "rgb(237, 237, 237)"}}>
                    <div className="headerBack">
                        <div className="left" onClick={()=>goPage()}>
                            <span className="iconfont icon-xiangzuo1"></span>
                        </div>
                        <span className="title">
                            {t("Afiliado")} 
                            <span style={{fontSize: "0.14rem"}}> - {t("Ganhe")}</span>
                        </span>
                        <span className="right" onClick={()=>goPage('home')}>
                            <span className="iconfont icon-home_line router-link-active"></span>
                        </span>
                    </div>
                    <div className="tabs alginLeft van-tabs van-tabs--line">
                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                            <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
                                <div className="van-tab" onClick={()=>goPage('summary')}>
                                    <span className="van-tab__text">{t("PAINEL")}</span>
                                </div>
                                <div className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('referrals')}>
                                    <span className="van-tab__text">{t("REFERÊNCIAS")}</span>
                                </div>
                                <div className="van-tab" onClick={()=>goPage('report')}>
                                    <span className="van-tab__text">{t("RELATÓRIO")}</span>
                                </div>
                                <div className="van-tab" onClick={()=>goPage('payments')}>
                                    <span className="van-tab__text">{t("PAGAMENTOS")}</span>
                                </div>
                                <div className="van-tab" onClick={()=>goPage('faq')}>
                                    <span className="van-tab__text">{t("FAQ")}</span>  
                                </div>
                                <div className="van-tab">
                                    <span className="van-tab__text">{t("TUTORIAL")}</span>
                                </div>
                                <div className="van-tabs__line"></div>
                            </div>
                        </div>
                    </div>
                    <div className="content">
                        <div className="referral referral-router-view">
                            <div className="search">
                                <div className="time">
                                    <span className="dateTime"></span>
                                    <div>
                                        <span className="iconfont icon-rili"></span>
                                        <span className="iconfont icon-guanbi"></span>
                                    </div>
                                </div>
                            </div>
                            <ul className="header">
                                <li>
                                    <div>#</div>
                                    <div>{t("Conta")}</div>
                                    <div>{t("Apostas")}({t("R$")})</div>
                                    <div>{t("ApostaEquipe")}({t("R$")})</div>
                                    <div>{t("Comissão")}</div>
                                </li>
                            </ul>
                            <div role="feed" className="list van-list">
                                <div className="van-list__finished-text">{t("Opa")}</div>
                                <div className="van-list__placeholder"></div>
                            </div>
                            <div className="total">
                                <div>
                                    <span className="num">{t("R$")} 0</span>
                                    <span>{t("Aposta")}</span>
                                </div>
                                <div>
                                    <span className="num">{t("R$")} 0</span>
                                    <span>{t("Comissão")}</span>
                                </div>
                            </div>
                            {/* 日历 */}
                        </div>
                    </div>
                </div>
                <div className="drawer-mask"></div>
            </div>
        </div>
    )
}
export default App